<template>
  <div class="statistics-view">

    <!--筛选表格-->
    <StatisticsFilter
      :form-data="selectFormData"
      @update:form-data="handleFormDataChange"
      @search="fetchStatistics(selectFormData)"/>


    <!--数据概览-->
    <StatisticsCards
      :overview-data="overviewData!"
      v-model:need-refresh="needRefresh"
      :daily-data="dailyAvgData!"
      :records="recordsData!"
    />

    <!--图表-->
    <StatisticsCharts
      :trend-data-month="trendDataMonth"
      :trend-data-day="trendDataDay"
      :expense-categories="expenseCategories"
      :income-categories="incomeCategories"
      :member-expenses="memberExpenses"
      :member-income="memberIncome"
    />


  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import StatisticsCards from './components/StatisticsCards.vue'
import StatisticsCharts from './components/StatisticsCharts.vue'
import StatisticsFilter from "@/views/statistics/components/StatisticsFilter.vue";
import type {
  ChartsTrend,
  DailyData,
  FilterForm, MemberBarChartData,
  OverviewData,
  Records, CategoryPie
} from "@/api/statistics/type.ts";
import {
  getChartBarMemberData, getChartPieCategoryData,
  getChartTrendDay,
  getChartTrendMonth,
  getOverviewDaily,
  getOverviewData,
  getOverviewRecords
} from "@/api/statistics";
import {ElMessage} from "element-plus";

//筛选表格
const selectFormData = ref<FilterForm>({
  familyId: null,
  tagIds: [],
  incomeExpenseType: null,
  familyMemberId: null,
  sourceType: null,
  startTime: null,
  endTime: null,
  minAmount: null,
  maxAmount: null
});


// 加载状态
const loading = ref(false);
const needRefresh = ref(false)
//数据总览-数据
const overviewData = ref<OverviewData>({

  incomeTotal: {
    amount: 0,
    yoy: 0,
    mom: 0
  },
  expenseTotal: {
    amount: 0,
    yoy: 0,
    mom: 0
  },
  balanceTotal: {
    amount: 0,
    yoy: 0,
    mom: 0
  },
  perAveIncome: {
    amount: 0,
    yoy: 0,
    mom: 0
  },
  perAveExpense: {
    amount: 0,
    yoy: 0,
    mom: 0
  }
})
//数据总览-日均收支
const dailyAvgData = ref<DailyData>({
  income: 0,
  expense: 0,
  balance: 0,
  balanceYoy: 0,
  balanceMom: 0

})
//数据总览-记录
const recordsData = ref<Records>({
  totalCount: 0,
  incomeCount: 0,
  expenseCount: 0,
})

//图表区
//趋势图-月
const trendDataMonth = ref<ChartsTrend[]>([])
//趋势图-日
const trendDataDay = ref<ChartsTrend[]>([])
//柱状图-成员收入
const memberIncome = ref<MemberBarChartData[]>([])
//柱状图-成员支出
const memberExpenses = ref<MemberBarChartData[]>([])
//饼图-分类收入
const incomeCategories = ref<CategoryPie[]>([])
//饼图-分类支出
const expenseCategories = ref<CategoryPie[]>([])

/**
 *  处理表格数据变化
 * @param newData
 */
function handleFormDataChange(newData: FilterForm) {
  selectFormData.value = {...newData}
}


const tableLoading = ref(false)

// 获取统计数据
function fetchStatistics(formData: FilterForm) {
  loading.value = true
  tableLoading.value = true

  setTimeout(async () => {

    try {

      //获取总览数据
      const overviewRes = await getOverviewData(formData);
      if (overviewRes.code === "M000") {
        overviewData.value = overviewRes.data
      }
      //获取日均数据
      const dailyRes = await getOverviewDaily(formData);
      if (dailyRes.code === "M000") {
        dailyAvgData.value = dailyRes.data
      }
      //获取记录数据
      const recordsRes = await getOverviewRecords(formData);
      if (recordsRes.code === "M000") {
        recordsData.value = recordsRes.data
      }
      //获取图表-月趋势图数据
      const resChartTrendMonth = await getChartTrendMonth(formData);
      if (resChartTrendMonth.code === "M000") {
        trendDataMonth.value = resChartTrendMonth.data
      }
      //获取图表-日趋势图数据
      const resChartTrendDay = await getChartTrendDay(formData);
      if (resChartTrendDay.code === "M000") {
        trendDataDay.value = resChartTrendDay.data
      }
      //获取图表-成员收入数据
      const resMemberIncome = await getChartBarMemberData(formData, 0);
      if (resMemberIncome.code === "M000") {
        memberIncome.value = resMemberIncome.data
      }
      //获取图表-成员支出数据
      const resMemberExpenses = await getChartBarMemberData(formData, 1);
      if (resMemberExpenses.code === "M000") {
        memberExpenses.value = resMemberExpenses.data
      }
      //获取图表-分类收入数据
      const resIncomeCategories = await getChartPieCategoryData(formData, 0);
      if (resIncomeCategories.code === "M000") {
        incomeCategories.value = resIncomeCategories.data
      }
      //获取图表-分类支出数据
      const resExpenseCategories = await getChartPieCategoryData(formData, 1);
      if (resExpenseCategories.code === "M000") {
        expenseCategories.value = resExpenseCategories.data
      }

    } catch (error) {
      ElMessage.error('获取数据失败')
      console.error('获取数据失败', error)
    } finally {
      loading.value = false
      tableLoading.value = false
    }


  }, 800)
}


//todo 导出数据
// const exportData = () => {
//   console.log('导出数据')
// }


</script>

<style scoped lang="scss">
.statistics-view {
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  background-color: var(--el-bg-color-page);
}
</style>
